<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <head>
        <title>$Title$</title>
        <meta charset="gb2312">
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            #box {
                display: inline-block;
            }

            #search {
                width: 545px;
                height: 42px;
                border-color: #4E6EF2;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                float: left;
            }

            #btn {
                width: 108px;
                height: 46px;
                background-color: #4e6ef2;
                color: #fff;
                border: none;
                font-size: 17px;
                font-weight: 400;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                float: left;
            }

            #show {
                width: 545px;
                border: 1px solid #4e6ef2;
                position: relative;
                left: -55px;
                text-align: left;
            }
        </style>
        <script src="js/jquery-3.6.0.js"></script>
        <script>
            $(function(){
                $("#search").keyup(function(){
                    //发送异步请求-->带参数(关键字)
                    $.ajax({
                        url:"search",
                        data:{"name":$(this).val()},
                        dataType:"json",
                        success:function (obt) {
                            //获取div对象
                            $obj = $("#show").show();
                            //遍历obt
                            $(obt).each(function (i,dom) {
                                $obj.append("<li style='list-style: none'>"+dom.keyword+"</li>")
                            })
                        }
                    })
                })
            })
        </script>
    </head>
<body>
<center>
    <img alt="" width="310" height="150" src="img/baidu.png"><br/>
    <div id="box">
        <input id="search" type="text" name="search"/>
        <button id="btn">百度一下</button>
    </div>
    <div id="show" style="display: none">

    </div>
</center>
</body>
</html>